<template>
	<view class="login">
		<dialog-shell :title="title" ref="shell" :confirmText="login" @confirm="confirmInfo">
			<view class="loginInput">
				<image class="image" :src="loginSrc" mode=""></image>
				<view class="entry">
					<text class="iconfont icon-xingmingyonghumingnicheng icon1"></text>
					<input @focus="changeImages(2)" @blur="recoverImages" type="text" placeholder="请输入用户名"
						v-model="username">
					<text class="iconfont icon-xingmingyonghumingnicheng icon1" style="opacity: 0;"></text>
				</view>

				<view class="entry">
					<text class="iconfont icon-mima icon1"></text>
					<input v-if="hasEye" @focus="changeImages(3)" @blur="recoverImages" type="text" placeholder="请输入密码"
						v-model="password">
					<input v-else @focus="changeImages(3)" @blur="recoverImages" type="password" placeholder="请输入密码"
						v-model="password">
					<text @click="isEye()"
						:class="[hasEye ? ('iconfont icon-yanjing_xianshi_o icon1') : ('iconfont icon-yanjing_yincang_o icon1')]"></text>
				</view>

			</view>
			<p style="text-align: end; color: rgb(165,197,242);font-size: 20rpx; line-height: 60rpx; margin-right: 20rpx;"
				@click='cilckGoRegister'>
				{{prompt}}
			</p>
		</dialog-shell>
	</view>

</template>

<script>
	let user = ""
	let pwd = ""
	export default {
		name: "login-shell",
		data() {
			return {
				loginSrc: "../../static/icons/duanzheng.png",
				login: "登录",
				prompt: "还没有账号？点击注册....",
				title: "登录解锁更多权益~",
				username: "",
				password: "",
				host: this.$params.host,
				hasEye: false,
			};
		},
		onLoad() {


		},
		mounted() {
			// 下次打开登录页面的时候把账号密码从缓存提出来填充到输入框
			user = uni.getStorageSync(this.$params.userName)
			pwd = uni.getStorageSync(this.$params.EncryptPwd)
			this.username = user
			this.password = pwd

		},
		methods: {
			cilckGoRegister() {
				uni.navigateTo({
					url: '/pages/register/register',
					success: res => {
						this.$refs.shell.clickToHide()
					}
				})
			},
			//判断是否显示密码
			isEye(num) {
				if (this.hasEye) {
					this.hasEye = false
				} else {
					this.hasEye = true
				}
			},
			//点击登录
			confirmInfo() {
				//如果是从缓存填充的账号密码先解密然后登录
				if (this.username == user && this.password == pwd) {
					this.password = this.$aesUtil.decrypt(pwd);
					this.postLogin()
				}
				//如果不是缓存填充的先进行表单验证再登录
				else if (this.validateForm()) {
					this.postLogin()
				}

			},

			//表单验证
			validateForm() {
				let isValid = true
				if (!this.username) {
					// 校验用户名是否为空
					isValid = false
					uni.showToast({
						title: '用户名不能为空',
						icon: 'error',
					})
				} else if (this.username.length < 6 || this.username.length > 16) {
					// 校验用户名长度是否在 6-16 之间
					isValid = false
					uni.showToast({
						title: '用户名长度必须在 6-16 之间',
						icon: 'error',
					})
				}
				if (!this.password) {
					// 校验密码是否为空
					isValid = false
					uni.showToast({
						title: '密码不能为空',
						icon: 'error',
					})
				} else if (this.password.length < 6 || this.password.length > 16) {
					// 校验密码长度是否在 6-16 之间
					isValid = false
					uni.showToast({
						title: '密码长度必须在 6-16 之间',
						icon: 'error',
					})
				}
				return isValid
			},
			//登录请求
			postLogin() {
				// 表单数据校验通过，可以进行提交操作
				let url = this.host + 'api/v1/login';
				let data = {
					"username": this.username,
					"password": this.password
				}
				let header = {
					'Content-Type': this.$params.content_type
				};
				this.$request.postWithHeader(url, header, data, res => {

					if (res.success) {
						uni.setStorageSync(this.$params.user, res.data)
						// 登录成功之后把账号密码加密并缓存
						uni.setStorageSync(this.$params.userName, this.username)
						uni.setStorageSync(this.$params.EncryptPwd, this.$aesUtil.encrypt(this.password))
						this.$emit("after")
						this.$notification.postNotification(this.$params.noti_refresh_user, res.data)
						uni.showToast({
							title: res.message,
							icon: 'success',
						})

						this.$refs.shell.clickToHide()
						return
					} else {
						this.username = null
						this.password = null
						uni.showToast({
							title: res.message,
							icon: 'error',
						})
					}
				}, () => {}, () => {})
			},
			//显示登录页面
			show() {
				user = uni.getStorageSync(this.$params.userName)
				pwd = uni.getStorageSync(this.$params.EncryptPwd)
				this.username = user
				this.password = pwd
				this.$refs.shell.show()
			},
			//点击输入框切换图片
			changeImages(index) {
				if (index == 2) {
					this.loginSrc = "../../static/icons/cheng.png";
				}
				if (index == 3) {
					this.loginSrc = "../../static/icons/wuyan.png";
				}
			},
			//失去焦点时恢复第一章图片
			recoverImages() {
				this.loginSrc = "../../static/icons/duanzheng.png"
			},
		},

	}
</script>

<style>
	@import url("login-shell.css");
</style>